.flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.item-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

// 使用循环生成类名
@for $i from 10 through 40 {
  .m-#{$i} {
    margin: #{$i}rpx;
  }
  .mx-#{$i} {
    margin-left: #{$i}rpx;
    margin-right: #{$i}rpx;
  }
  .my-#{$i} {
    margin-top: #{$i}rpx;
    margin-bottom: #{$i}rpx;
  }
}